

$(".dropdown-menu a").click(function(){
  var selText = $(this).text();
  // $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
  alert(selText);
});

// 图形1
(
 function(){
 	 $.ajax({
			type:"get",//请求方式
			url:"http://117.160.143.144:12243/shht/show/union_proj",//请求地址
			dataType:"json",//与其返回的数据类型,如果是json格式，在接收到返回值时会自动封装成json对象
			//请求成功时调用的函数
			success:function(data){//data是形参名，代表的是返回的数据
				// 遍历返回的数据数组
				parm_data=formate_dict(data);
				parm_data["tag"]=[ "规划目标小收","实际小收","完成率"];
				parm_data["title"]='2021年03月联通外呼侧业务区小收完成监控';
				parm_data["yAxis"]=['小收','完成率(%)'];
				generateChart_dict(parm_data,"#echarts-test1");
			}
		});
 }
)();

// 图形2
(
 function(){
 	 $.ajax({
			type:"get",//请求方式
			url:"http://117.160.143.144:12243/shht/show/union_labor",//请求地址
			dataType:"json",//与其返回的数据类型,如果是json格式，在接收到返回值时会自动封装成json对象
			//请求成功时调用的函数
			success:function(data){//data是形参名，代表的是返回的数据
				// 遍历返回的数据数组
				parm_data=formate_dict(data);
				parm_data["tag"]=[ "规划目标工时","实际工时","完成率"];
				parm_data["title"]='2021年03月联通外呼侧业务区工时完成监控';
				parm_data["yAxis"]=['工时','完成率(%)'];
				generateChart_dict(parm_data,"#echarts-test2");
			}
		});
 }
)();

// 图形3
(
 function(){
 	 $.ajax({
			type:"get",//请求方式
			url:"http://117.160.143.144:12243/shht/show/mobile_proj",//请求地址
			dataType:"json",//与其返回的数据类型,如果是json格式，在接收到返回值时会自动封装成json对象
			//请求成功时调用的函数
			success:function(data){//data是形参名，代表的是返回的数据
				// 遍历返回的数据数组
				parm_data=formate_dict(data);
				parm_data["tag"]=[ "规划目标小收","实际小收","完成率"];
				parm_data["title"]='2021年03月中移外呼侧业务区小收完成监控';
				parm_data["yAxis"]=['小收','完成率(%)'];
				generateChart_dict(parm_data,"#echarts-test3");
			}
		});
 }
)();

// 图形4
(
 function(){
 	 $.ajax({
			type:"get",//请求方式
			url:"http://117.160.143.144:12243/shht/show/mobile_proj",//请求地址
			dataType:"json",//与其返回的数据类型,如果是json格式，在接收到返回值时会自动封装成json对象
			//请求成功时调用的函数
			success:function(data){//data是形参名，代表的是返回的数据
				// 遍历返回的数据数组
				parm_data=formate_dict(data);
				parm_data["tag"]=[ "规划目标工时","实际工时","完成率"];
				parm_data["title"]='2021年03月中移外呼侧业务区工时完成监控';
				parm_data["yAxis"]=['工时','完成率(%)'];
				generateChart_dict(parm_data,"#echarts-test4");
			}
		});
 }
)();

/***联通业务区***/
function formate_dict(data){
	mydata=new Array();
	 busi_type=[]
	 monney_hour_plan=[]
	 monney_hour=[]
	 monney_rate=[]
	 for(var i=0;i<data.length;i++){
	 	//得到数组中的每一个元素
	 	busi_type.push(data[i][0]);
	 	monney_hour_plan.push(data[i][1]);
	 	monney_hour.push(data[i][2]);
		monney_rate.push(data[i][3]);
	 }
	 mydata["busi_type"]=busi_type;
	 mydata["monney_hour"]=monney_hour;
	 mydata["monney_hour_plan"]=monney_hour_plan;
	 mydata["monney_rate"]=monney_rate;
	 
	 return mydata;
}

function generateChart_dict(mydata,id) {
  // 1实例化对象
  var myChart = echarts.init($(id)[0]);
  // 2. 指定配置项和数据
  var option = {
     title: {
	        text: mydata["title"],
	        textStyle: {
	        	 align: 'center',
	            color: '#000000',
	            fontSize: 20,
	        },
	        top: '3%',
	        left: '35%',
	    },
    backgroundColor: '#ffffff',
    grid: {
        top: "25%",
        bottom: "10%"//也可设置left和right设置距离来控制图表的大小
    },
    tooltip: {
        trigger: "axis",
		formatter: '{b0}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}%',//显示格式
        axisPointer: {
            type: "shadow",
            label: {
                show: true
            }
        }
    },
    legend: {
        data: mydata["tag"],
        top: "15%",
        textStyle: {
            color: "#000000"
        }
    },
    xAxis: {
        data:mydata["busi_type"] ,
        axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
                        color: '#000000'
                        }
        },
        axisTick: {
            show: true //隐藏X轴刻度
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: "#000000" //X轴文字颜色
            }
        },
         
    },
    yAxis: [{
            type: "value",
            name: mydata["yAxis"][0],
            nameTextStyle: {
                color: "#000000"
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: true
            },
            axisLine: {
                show: true,
                lineStyle: {
                            color: '#000000'
                            }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#000000"
                }
            },
             
        },
        {
            type: "value",
            name: mydata["yAxis"][1],
            nameTextStyle: {
                color: "#000000"
            },
            position: "right",
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: true,
                formatter: "{value} ", //右侧Y轴文字显示
                textStyle: {
                    color: "#000000"
                }
            }
        },
        {
            type: "value",
            gridIndex: 0,
            min: 50,
            max: 100,
            splitNumber: 8,
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.04)"]
                }
            }
        }
    ],
    series: [
		 
  {
      name: mydata["tag"][0],
      type: "bar",
      barWidth: 25,
      itemStyle: {
          normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: "#0055ff"
                  },
                  {
                      offset: 1,
                      color: "#83b3ec"
                  }
              ]),
			  label: {
					show: true, //开启显示
					position: 'top', //在上方显示
					textStyle: { //数值样式
						color: 'black',
						fontSize: 12
					},
				}
          },
		  
      },
      data:  mydata["monney_hour"]
  },
        {
            name: mydata["tag"][1],
            type: "bar",
            barWidth: 25,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: "#aa007f"
                        },
                        {
                            offset: 1,
                            color: "#4693EC"
                        }
                    ]),
					label: {
										show: true, //开启显示
										position: 'top', //在上方显示
										textStyle: { //数值样式
											color: 'black',
											fontSize: 12
										},
									}
                }
            },
            data: mydata["monney_hour_plan"]
        },
		{
		    name: mydata["tag"][2],
		    type: "line",
		    yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
		    smooth: true, //平滑曲线显示
		    showAllSymbol: true, //显示所有图形。
		    symbol: "circle", //标记的图形为实心圆
		    symbolSize: 10, //标记的大小
		    itemStyle: {
		        //折线拐点标志的样式
		        color: "#058cff"
		    },
		    lineStyle: {
		        color: "#058cff"
		    },
		    areaStyle:{
		        color: "rgba(5,140,255, 0.2)"
		    },
		   data:  mydata["monney_rate"]
		}
    ]
};
  // 3. 把配置项给实例对象
  myChart.setOption(option);
  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function() {
    myChart.resize();
  });
}

// // 第二张图

// // $(".dropdown-menu a").click(function(){
// //   var selText = $(this).text();
// //   // $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
// //   alert(selText);
// // });

// // 柱状图模块1
// (function() {
//   // 1实例化对象
//   var myChart = echarts.init($("#echarts-test2")[0]);
  
//   mydata=[
// 	  ["小收","工时"],//legend
// 	  [
// 	     "伊川3职场",
// 	     "新安2职场",
// 	     "孟津1职场",
// 	     "灵宝2职场",
// 	     "浚县1职场",
// 	     "陕州1职场",
// 	     "忻州2职场",
// 	     "温县2职场",
// 	     "灵宝3职场",
// 	     "鹤壁5职场",
// 	     "获嘉1职场",
// 	     "晋中职场",
// 	     "博爱1职场",
// 	     "内黄1职场",
// 	     "卫辉2职场",
// 	     "凤泉1职场",
// 	     "西平1职场",
// 	     "温县1职场",
// 	     "伊川2职场"
	      
// 	  ],
// 	  [36.66,34.05,42.71,49.82,43.08,30.51,38.39,38.53,43.97,44.5,35.09,36.12,38.38,31.37,44.47,39.67,27.32,45.62,33.62],
// 	  [1.721784,1.372362,1.2649,1.15281,1.152652,1.070121,1.033496,0.941064,0.867775,0.793339,0.71658,0.616043,0.549408,0.51418,0.496342,0.457655,0.391095,0.391028,0.126121]
	  
//   ]
//   // 2. 指定配置项和数据
//   var option = {
//      title: {
// 	        text: '2021年03月联通外呼侧职场工时小收监控',
// 	        textStyle: {
// 	        	 align: 'center',
// 	            color: '#fff',
// 	            fontSize: 20,
// 	        },
// 	        top: '3%',
// 	        left: '35%',
// 	    },
//     backgroundColor: '#0f375f',
//     grid: {
//         top: "25%",
//         bottom: "10%"//也可设置left和right设置距离来控制图表的大小
//     },
//     tooltip: {
//         trigger: "axis",
// 		formatter: '{b0}<br />{a0}: {c0}<br />{a1}: {c1}',//显示格式
//         axisPointer: {
//             type: "shadow",
//             label: {
//                 show: true
//             }
//         }
//     },
//     legend: {
//         data: mydata[0],
//         top: "15%",
//         textStyle: {
//             color: "#ffffff"
//         }
//     },
//     xAxis: {
//         data:mydata[1] ,
//         axisLine: {
//             show: true, //隐藏X轴轴线
//             lineStyle: {
//                         color: '#01FCE3'
//                         }
//         },
//         axisTick: {
//             show: true //隐藏X轴刻度
//         },
//         axisLabel: {
//             show: true,
//             textStyle: {
//                 color: "#ebf8ac" //X轴文字颜色
//             }
//         },
         
//     },
//     yAxis: [{
//             type: "value",
//             name: "小时(万)",
//             nameTextStyle: {
//                 color: "#ebf8ac"
//             },
//             splitLine: {
//                 show: false
//             },
//             axisTick: {
//                 show: true
//             },
//             axisLine: {
//                 show: true,
//                 lineStyle: {
//                             color: '#FFFFFF'
//                             }
//             },
//             axisLabel: {
//                 show: true,
//                 textStyle: {
//                     color: "#ebf8ac"
//                 }
//             },
             
//         },
//         {
//             type: "value",
//             name: "小收",
//             nameTextStyle: {
//                 color: "#ebf8ac"
//             },
//             position: "right",
//             splitLine: {
//                 show: false
//             },
//             axisTick: {
//                 show: false
//             },
//             axisLine: {
//                 show: false
//             },
//             axisLabel: {
//                 show: true,
//                 formatter: "{value} ", //右侧Y轴文字显示
//                 textStyle: {
//                     color: "#ebf8ac"
//                 }
//             }
//         },
//         {
//             type: "value",
//             gridIndex: 0,
//             min: 50,
//             max: 100,
//             splitNumber: 8,
//             splitLine: {
//                 show: false
//             },
//             axisLine: {
//                 show: false
//             },
//             axisTick: {
//                 show: false
//             },
//             axisLabel: {
//                 show: false
//             },
//             splitArea: {
//                 show: true,
//                 areaStyle: {
//                     color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.04)"]
//                 }
//             }
//         }
//     ],
//     series: [{
//             name: mydata[0][0],
//             type: "line",
//             yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
//             smooth: true, //平滑曲线显示
//             showAllSymbol: true, //显示所有图形。
//             symbol: "circle", //标记的图形为实心圆
//             symbolSize: 10, //标记的大小
//             itemStyle: {
//                 //折线拐点标志的样式
//                 color: "#058cff"
//             },
//             lineStyle: {
//                 color: "#058cff"
//             },
//             areaStyle:{
//                 color: "rgba(5,140,255, 0.2)"
//             },
//             data: mydata[2]
//         },
//         {
//             name: mydata[0][1],
//             type: "bar",
//             barWidth: 30,
//             itemStyle: {
//                 normal: {
//                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
//                             offset: 0,
//                             color: "#00FFE3"
//                         },
//                         {
//                             offset: 1,
//                             color: "#4693EC"
//                         }
//                     ])
//                 }
//             },
//             data: mydata[3]
//         }
//     ]
// };
//   // 3. 把配置项给实例对象
//   myChart.setOption(option);
//   // 4. 让图表跟随屏幕自动的去适应
//   window.addEventListener("resize", function() {
//     myChart.resize();
//   });
// })();



// // 第三张图

// // $(".dropdown-menu a").click(function(){
// //   var selText = $(this).text();
// //   // $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
// //   alert(selText);
// // });

// // 柱状图模块1
// (function() {
//   // 1实例化对象
//   var myChart = echarts.init($("#echarts-test3")[0]);
  
//   mydata=[
//   	  ["小收","小收完成率"],//legend
//   	  [
//   	     "鹤壁5职场",
//   	     "灵宝2职场",
//   	     "浚县1职场",
//   	     "忻州2职场",
//   	     "温县1职场",
//   	     "获嘉1职场",
//   	     "温县2职场",
//   	     "新安2职场",
//   	     "灵宝3职场",
//   	     "博爱1职场",
//   	     "晋中职场",
//   	     "伊川3职场",
//   	     "卫辉2职场",
//   	     "孟津1职场",
//   	     "凤泉1职场",
//   	     "陕州1职场",
//   	     "内黄1职场",
//   	     "伊川2职场",
//   	     "西平1职场"

  	      
//   	  ],
//   	  [44.5,49.82,43.08,38.39,45.62,35.09,38.53,34.04,43.97,38.38,36.12,36.66,44.47,42.71,39.44,30.51,31.37,33.62,27.32],
//   	  [1.04,1.04,1.03,1.02,1.02,0.99,0.99,0.99,0.99,0.99,0.97,0.97,0.97,0.97,0.95,0.94,0.93,0.9,0.88]
  	  
//     ]
//     // 2. 指定配置项和数据
//     var option = {
//        title: {
//   	        text: '2021年03月联通外呼侧职场小收监控',
//   	        textStyle: {
//   	        	 align: 'center',
//   	            color: '#fff',
//   	            fontSize: 20,
//   	        },
//   	        top: '3%',
//   	        left: '35%',
//   	    },
//       backgroundColor: '#0f375f',
//       grid: {
//           top: "25%",
//           bottom: "10%"//也可设置left和right设置距离来控制图表的大小
//       },
//       tooltip: {
//           trigger: "axis",
//   		formatter: '{b0}<br />{a0}: {c0}<br />{a1}: {c1}',//显示格式
//           axisPointer: {
//               type: "shadow",
//               label: {
//                   show: true
//               }
//           }
//       },
//       legend: {
//           data: mydata[0],
//           top: "15%",
//           textStyle: {
//               color: "#ffffff"
//           }
//       },
//       xAxis: {
//           data:mydata[1] ,
//           axisLine: {
//               show: true, //隐藏X轴轴线
//               lineStyle: {
//                           color: '#01FCE3'
//                           }
//           },
//           axisTick: {
//               show: true //隐藏X轴刻度
//           },
//           axisLabel: {
//               show: true,
//               textStyle: {
//                   color: "#ebf8ac" //X轴文字颜色
//               }
//           },
           
//       },
//       yAxis: [{
//               type: "value",
//               name: "小收完成率",
//               nameTextStyle: {
//                   color: "#ebf8ac"
//               },
// 			  min:Math.ceil(Math.min(...mydata[3])/0.05)*0.05-0.05,
// 			  max:Math.ceil(Math.max(...mydata[3])/0.05)*0.05,
// 			  interval:0.05,
//               splitLine: {
//                   show: false
//               },
//               axisTick: {
//                   show: true
//               },
//               axisLine: {
//                   show: true,
//                   lineStyle: {
//                               color: '#FFFFFF'
//                               }
//               },
//               axisLabel: {
//                   show: true,
//                   textStyle: {
//                       color: "#ebf8ac"
//                   }
//               },
               
//           },
//           {
//               type: "value",
//               name: "小收",
//               nameTextStyle: {
//                   color: "#ebf8ac"
//               },
//               position: "right",
//               splitLine: {
//                   show: false
//               },
//               axisTick: {
//                   show: false
//               },
//               axisLine: {
//                   show: false
//               },
//               axisLabel: {
//                   show: true,
//                   formatter: "{value} ", //右侧Y轴文字显示
//                   textStyle: {
//                       color: "#ebf8ac"
//                   }
//               }
//           },
//           {
//               type: "value",
//               gridIndex: 0,
//               min: 50,
//               max: 100,
//               splitNumber: 8,
//               splitLine: {
//                   show: false
//               },
//               axisLine: {
//                   show: false
//               },
//               axisTick: {
//                   show: false
//               },
//               axisLabel: {
//                   show: false
//               },
//               splitArea: {
//                   show: true,
//                   areaStyle: {
//                       color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.04)"]
//                   }
//               }
//           }
//       ],
//       series: [{
//               name: mydata[0][0],
//               type: "line",
//               yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
//               smooth: true, //平滑曲线显示
//               showAllSymbol: true, //显示所有图形。
//               symbol: "circle", //标记的图形为实心圆
//               symbolSize: 10, //标记的大小
//               itemStyle: {
//                   //折线拐点标志的样式
//                   color: "#058cff"
//               },
//               lineStyle: {
//                   color: "#058cff"
//               },
//               areaStyle:{
//                   color: "rgba(5,140,255, 0.2)"
//               },
//               data: mydata[2]
//           },
//           {
//               name: mydata[0][1],
//               type: "bar",
//               barWidth: 30,
//               itemStyle: {
//                   normal: {
//                       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
//                               offset: 0,
//                               color: "#00FFE3"
//                           },
//                           {
//                               offset: 1,
//                               color: "#4693EC"
//                           }
//                       ])
//                   }
//               },
//               data: mydata[3]
//           }
//       ]
//   };
//     // 3. 把配置项给实例对象
//     myChart.setOption(option);
//     // 4. 让图表跟随屏幕自动的去适应
//     window.addEventListener("resize", function() {
//       myChart.resize();
//     });
//   })();